<template>
	<div id="register">
		<div  class="register-box">
  <el-form :model="SysUsers" :rules="rules" ref="ruleForm" label-width="100px " class="demo-ruleForm">
	  <h1 >用户注册</h1>
	  <el-form-item label="昵称" prop="nick_name" >
	    <el-input v-model="SysUsers.nick_name" ></el-input>
	  </el-form-item>
	  <el-form-item label="用户名" prop="username" >
	    <el-input v-model="SysUsers.username" ></el-input>
	  </el-form-item>
	  <el-form-item label="密码" prop="password" >
	    <el-input type="password" v-model="SysUsers.password" ></el-input>
	  </el-form-item>
    <el-form-item label="确认密码" prop="checkpassword" >
      <el-input type="password" v-model="SysUsers.checkpassword" ></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone" >
      <el-input v-model="SysUsers.phone" ></el-input>
    </el-form-item>
		<router-link to="/login" class="router">返回登录页</router-link>
    <el-form-item class="btns">
      <el-button type="success" @click="submitForm('ruleForm')">注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  </div>
    </div>
</template>

<script>


export default {
  name: 'Register',
  components: {
    },
  data() {
    return {
      SysUsers: {
        nick_name:'',
        username:'',
        password:'',
        checkpassword:'',
        phone:'',
        state:'1',
        isDeleted:'0'
      },
      rules: {
        nick_name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 11, message: '请输入1到11位字符', trigger: 'blur'}
            ],
        username: [
          { required: true, message: '请输入登录用户名', trigger: 'blur' },
          { min: 1, max: 11, message: '请输入5到11位字符', trigger: 'blur'}
            ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 11, message: '请输入6到11位字符', trigger: 'blur'}
            ],
        checkpassword: [
          { required: true, message: '请再次输入登录密码', trigger: 'blur' },
          { min: 6, max: 11, message: '请输入6到11位字符', trigger: 'blur'}
          ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur'}
        ],
      },
    }
  },
      methods: {
        async submitForm(formName) {
              if (this.SysUsers.password!=this.SysUsers.checkpassword){
                return this.$message.error('两次密码不一致')
              }

              this.$refs[formName].validate(async (valid) => {
			          if (valid) {

                    //查询昵称和用户名是否重复
                    const {data: res}= await this.$http.post(`/sysUsers/selUserCount/${this.SysUsers.username}`)
                    console.log(res)
                    if (res>0){
                      return this.$message.error('用户名已存在')
                    }
			            //提交表单数据
                  const {data: res2}= await this.$http.post('/sysUsers/addSysUsers', this.SysUsers)
                  console.log(res2);
                  this.$message.success('注册成功！');
                  //自定义事件处理界面刷新
                  this.$router.push('/login')
			          }else {
                  return this.$message.error('校验失败')
			          }
			        });
			      },
				    //重置
			      resetForm(formName) {
            this.$refs[formName].resetFields();
                  for (const selector of selectors) {
                    this.$refs[selector].resetField();
					      }
			      }
			  }
}
</script>

<style scoped>
html {
  height: 100%;
}
body {
  height: 100%;
}
#register {
  /* margin-top: 5%; */
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.register-box {
  background-color: #fff;
  width: 358px;
  height: 540px;
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
h1{
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}

.router{
  text-decoration: none;
}

.btns {
  display: flex;
  justify-content: end;
}
</style>
